<template>
	<view :style="{'min-height':Height+'px'}" style="background-color: #03B3FE;">
		<view class="new-list-header" style="background: url(/static/background/new-bg.png);background-size: cover;">
			<uni-nav-bar left-icon="left" color="#ffffff" @clickLeft="back"  title="浏览记录"></uni-nav-bar>
		</view>
		<view class="main">
			<view class='collectionGoods' v-if="visitList.length">
				<navigator :url='"/pages/goods_details/index?id="+item.product_id' hover-class='none' class='item acea-row row-between-wrapper'
				 v-for="(item,index) in visitList" :key="index">
					<view class='pictrue'>
						<image :src="item.image"></image>
					</view>
					<view class='text acea-row row-column-between'>
						<view class='name line1'>{{item.store_name}}</view>
						<view class='acea-row row-between-wrapper'>
							<view class='money'>￥{{item.product_price}}</view>
						</view>
					</view>
				</navigator>
				<view class='loadingicon acea-row row-center-wrapper'>
					<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
				</view>
			</view>
			<view class='noCommodity' v-else-if="!visitList.length && page > 1">
				<view class='pictrue'>
					<image src='../../../static/images/noCollection.png'></image>
				</view>
				<recommend :hostProduct="hostProduct"></recommend>
			</view>
		</view>
		
		<!-- #ifdef MP -->
		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
		<!-- #endif -->
		<home v-if="navigation"></home>
	</view>
</template>

<script>
	import {
		getVisitList,
		getProductHot
	} from '@/api/store.js';
	import {
		mapGetters
	} from "vuex";
	import {
		toLogin
	} from '@/libs/login.js';
	import recommend from '@/components/recommend';
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import home from '@/components/home';
	import colors from '@/mixins/color.js'
	export default {
		components: {
			recommend,
			// #ifdef MP
			authorize,
			// #endif
			home
		},
		mixins:[colors],
		data() {
			return {
				hostProduct: [],
				loadTitle: '加载更多',
				loading: false,
				loadend: false,
				visitList: [],
				limit: 20,
				page: 1,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false ,//是否隐藏授权
				hotScroll:false,
				hotPage:1,
				hotLimit:10,
				Height:500
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad() {
			if (this.isLogin) {
				this.loadend = false;
				this.page = 1;
				this.visitList = [];
				this.get_user_visit_list();
				this.get_host_product();
			} else {
				toLogin();
			}
			var that = this;
			uni.getSystemInfo({
				success:function(res){
					that.Height = res.windowHeight;
				}
			})
		},
		onShow(){
			this.loadend = false;
			this.page = 1;
			this.$set(this,'visitList',[]);
			this.get_user_visit_list();
		},
		methods: {
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			back(){
				uni.navigateBack()
			},
			/**
			 * 获取收藏产品
			 */
			get_user_visit_list: function() {
				let that = this;
				if (this.loading) return;
				if (this.loadend) return;
				that.loading = true;
				that.loadTitle = "";
				getVisitList({
					page: that.page,
					limit: that.limit
				}).then(res => {
					let visitList = res.data.list;
					let loadend = visitList.length < that.limit;
					that.visitList = that.$util.SplitArray(visitList, that.visitList);
					that.$set(that, 'visitList', that.visitList);
					that.loadend = loadend;
					that.loadTitle = loadend ? '我也是有底线的' : '加载更多';
					that.page = that.page + 1;
					that.loading = false;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = "加载更多";
				});
			},
			/**
			 * 获取我的推荐
			 */
			get_host_product: function() {
				let that = this;
				if(that.hotScroll) return
				getProductHot(
					that.hotPage,
					that.hotLimit,
				).then(res => {
					that.hotPage++
					that.hotScroll = res.data.length<that.hotLimit
					that.hostProduct = that.hostProduct.concat(res.data)
				});
			}
		},
		onReachBottom() {
			if(this.visitList.length){
				this.get_user_visit_list();
			}else{
				this.get_host_product();
			}
		}
	}
</script>

<style scoped lang="scss">
	.collectionGoods {
		background: rgba(255,255,255,.9);
		border-radius: 10px;
		
	}
	.main{
		width: 90%;
		margin-left: 5%;
		border-radius: 10px;
	}
	.collectionGoods .item {
		margin-left: 30rpx;
		padding-right: 30rpx;
		height: 180rpx;
		width: 100%;
	}

	.collectionGoods .item .pictrue {
		width: 110rpx;
		height: 110rpx;
	}

	.collectionGoods .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
	}

	.collectionGoods .item .text {
		width: 500rpx; 
		height: 130rpx;
		font-size: 28rpx;
		color: #282828;
	}

	.collectionGoods .item .text .name {
		width: 100%;
	}

	.collectionGoods .item .text .money {
		font-size: 26rpx;
		color: #FF836A;
	}

	.collectionGoods .item .text .delete {
		font-size: 26rpx;
		color: #282828;
		width: 144rpx;
		height: 46rpx;
		border: 1px solid #bbb;
		border-radius: 4rpx;
		text-align: center;
		line-height: 46rpx;
	}

	.noCommodity {
		background-color: #fff;
		padding-top: 1rpx;
		border-top: 0;
	}
</style>